<template>
  <div class="Administrator">
    <div><span>后台首页</span> <span>></span> <span>管理员管理</span></div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="管理员列表" name="manager">
        <div class="quanbu">
          <div class="quanbuleft">
            <el-button type="success" @click="open">
              <span>添加管理员</span>
            </el-button>
          </div>
          <div class="quanburight">
            <input type="text" placeholder="请输入用户名" />
            <el-button type="info"> <span>搜索</span></el-button>
          </div>
        </div>
        <!-- !!!!!!!!!! -->
        <div class="zhezhao" v-show="bool">
          <div class="mainqwe">
            <div class="qwe1">
              <span>提示</span>
              <span @click="qaa">X</span>
            </div>
            <el-form-item label="用户名">
              <el-input
                class="qwe2"
                v-model="form.username"
                placeholder="请输入用户名"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input
                class="qwe2"
                v-model="form.password"
                placeholder="请输入密码"
              ></el-input>
            </el-form-item>
            <el-form-item label="头像"> </el-form-item>
            <el-form-item label="所属角色">
              <el-select v-model="form.role_id" placeholder="请选择所属角色">
                <el-option
                  :label="it.name"
                  v-for="it in arr"
                  :key="it.id"
                  :value="it.id"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="状态">
              <el-radio-group size="medium" v-model="form.status">
                <el-radio border label="1">启用</el-radio>
                <el-radio border label="0">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
            <div class="qwe666">
              <button class="no" @click="qaa">取消</button>
              <button class="ok" @click="add('管理')">确认</button>
            </div>
          </div>
        </div>

        <el-table :data="tableData" border style="width: 100%">
          <el-table-column fixed prop="avatar" label="用户头像" width="300px">
            <template v-slot="scope">
              <img class="qwe" :src="scope.row.avatar" alt="" />
            </template>
          </el-table-column>
          <el-table-column prop="username" label="用户名" width="266px">
          </el-table-column>
          <el-table-column prop="role.name" label="所属管理员" width="266px">
          </el-table-column>
          <el-table-column prop="status" label="状态" width="266px">
            <template v-slot="scope">
              <el-button :type="scope.row.status == 0 ? 'danger' : 'success'"
                >{{ scope.row.status == 0 ? "禁用" : "启用" }}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="180px">
            <template v-slot="scope">
              <el-button @click="handleC(scope.row)" type="text" size="small"
                >修改</el-button
              >
              <el-button
                @click="del(scope.row, 'manager')"
                type="text"
                size="small"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="角色列表" name="role">
        <div class="quanbu">
          <div class="quanbuleft">
            <el-button type="success" @click="open">
              <span>添加角色</span>
            </el-button>
          </div>
        </div>

        <div class="zhezhao" v-show="bool">
          <div class="mainqwe">
            <div class="qwe1">
              <span>提示</span>
              <span @click="qaa">X</span>
            </div>
            <el-form-item label="角色名称">
              <el-input
                class="qwe2"
                v-model="form.jiaose11"
                placeholder="请输入角色名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="角色描述">
              <el-input
                type="textarea"
                class="qwe2"
                v-model="form.jiaose22"
              ></el-input>
            </el-form-item>

            <el-form-item label="状态">
              <el-radio-group size="qaz" v-model="form.status">
                <el-radio border label="1">启用</el-radio>
                <el-radio border label="0">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
            <div class="qwe666">
              <button class="no" @click="qaa">取消</button>
              <button class="ok" @click="add('角色')">确认</button>
            </div>
          </div>
        </div>

        <el-table :data="jiaose" border style="width: 100%">
          <el-table-column prop="name" label="角色名称" width="330">
          </el-table-column>
          <el-table-column prop="desc" label="角色描述" width="330">
          </el-table-column>
          <el-table-column prop="status" label="状态" width="317">
            <template v-slot="scope">
              <el-button :type="scope.row.status == 0 ? 'danger' : 'success'"
                >{{ scope.row.status == 0 ? "禁用" : "启用" }}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="300">
            <template v-slot="scope">
              <el-button @click="handleC(scope.row)" type="text" size="small"
                >修改</el-button
              >
              <el-button type="text" size="small">配置权限</el-button>

              <el-button
                @click="del(scope.row, 'role')"
                type="text"
                size="small"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="权限列表" name="rule">
        <div class="quanbu">
          <div class="quanbuleft">
            <el-button type="success" @click="open">
              <span>添加规则</span>
            </el-button>
          </div>
          <div class="quanburight">
            <input type="text" placeholder="请输入用户名" />
            <el-button type="info"> <span>搜索</span></el-button>
          </div>
        </div>
        <div class="zhezhao" v-show="bool">
          <div class="mainqwe">
            <div class="qwe1">
              <span>提示</span>
              <span @click="qaa">X</span>
            </div>
            <el-form-item label="用户名">
              <el-input
                class="qwe2"
                v-model="form.username"
                placeholder="请输入用户名"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input
                class="qwe2"
                v-model="form.password"
                placeholder="请输入密码"
              ></el-input>
            </el-form-item>
            <el-form-item label="头像"> </el-form-item>
            <el-form-item label="所属角色">
              <el-select v-model="form.role_id" placeholder="请选择所属角色">
                <el-option
                  :label="it.name"
                  v-for="it in arr"
                  :key="it.id"
                  :value="it.id"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="状态">
              <el-radio-group size="qaz" v-model="form.status">
                <el-radio border label="1">启用</el-radio>
                <el-radio border label="0">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
            <div class="qwe666">
              <button class="no" @click="qaa">取消</button>
              <button class="ok" @click="add('管理')">确认</button>
            </div>
          </div>
        </div>
        <!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
        <div class="blockaaa">
          <p>使用 scoped slot</p>
          <!-- <el-tree
      :data="list"
      show-checkbox
      node-key="id"
      default-expand-all
      :expand-on-click-node="false"  :props="prop">
      <template  v-slot="{ node, data }">
        <span>{{ node.label }}</span>
        <span class="fr">
           <el-button type="success">启用</el-button>
          <el-button
            type="text"
            size="mini"
            @click="() => append(node,data)">
           增加
          </el-button>
          <el-button
            type="text"
            size="mini"
            @click="() => revise(node, data)">
            修改
          </el-button>
          <el-button
            type="text"
            size="mini"
            @click="() => remove(node, data)">
            删除
          </el-button>
        </span>
      </template>
    </el-tree> -->
          <el-tree
            :data="list"
            show-checkbox
            node-key="id"
            :props="prop"
            default-expand-all
            :expand-on-click-node="false"
          >
            <template #default="{ node, data }">
              <span class="custom-tree-node"
                ><span>
                  <el-icon v-if="data.icon" :class="data.icon"><Edit /></el-icon
                  ><span v-if="!data.icon && data.child.length == 0">{{
                    data.method
                  }}</span
                  ><span>{{ node.label }}</span>
                  <span>{{ data.frontpath }}</span>
                </span>
                <span class="fr">
                  <el-button>增加</el-button>
                  <el-button>删除</el-button>
                </span>
              </span>
            </template>
          </el-tree>
        </div>
      </el-tab-pane>

      <div class="block1111" v-show="block">
        <el-pagination
          @size-change="handleSize"
          @current-change="handleCurrent"
          :current-page="sum1"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="summmmmm"
        >
        </el-pagination>
      </div>
    </el-tabs>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        password: "",
        status: "",
        role_id: "",
        username: "",
        jiaose11: "",
        jiaose22: "",
      },
      activeName: "manager",
      tab: "manager",
      tableData: [], //管理员列表数据
      num1: 1, //页数
      num2: 10, //每页数量
      bool: false,
      arr: [], //管理员列表数据
      jiaose: [], //角色列表
      summmmmm: 0,
      block: true,
      databb: [],
      book: true,
      txt: "",
      prop: {
        label: "name",
        children: "child",
      },
      list: [],
    };
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    },
    handleClick(tab) {
      (this.num1 = 1), (this.num2 = 10);
      this.tab = tab.props.name;
      if (this.tab == "manager") {
        this.summmmmm = this.tableData.length;
        this.block = true;
      }
      if (this.tab == "role") {
        this.summmmmm = this.jiaose.length;
        this.block = true;
      }
      if (this.tab == "rule") {
        this.block = false;
      }
    },

    //修改管理员列表/角色列表
    handleC(row) {
      this.bool = true;
      this.txt = "/" + row.id;

      this.form.username = row.username;
      this.form.status = row.status;
      this.form.role_id = row.role_id;

      this.form.jiaose11 = row.name;
      this.form.status = row.status;
      console.log(row, this.form.jiaose11, this.form.status);
    },
    //删除管理员列表数据/删除角色列表
    del(row, val) {
      this.$confirm("是否要删除该规格", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          console.log(row);
          this.$axios({
            method: "post",
            url: `http://ceshi5.dishait.cn/admin/${val}/${row.id}/delete`,
            headers: {
              token: this.$store.state.token,
            },
          }).then(() => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getdata(this.num1, this.num2);
            this.getjiaose(this.num1, this.num2);
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //获取管理员列表数据
    getdata(a, b) {
      //console.log(this.$store.state.token);
      this.$axios({
        method: "get",
        url: `http://ceshi5.dishait.cn/admin/manager/${a}?limit=${b}&keyword=`,
        headers: { token: this.$store.state.token },
      }).then((res) => {
        if (res.data.msg == "ok") {
          this.tableData = res.data.data.list;
          //   console.log(res.data.data);
          this.arr = res.data.data.role;
          this.num1 = a;
          this.num2 = b;
          this.summmmmm = res.data.data.list.length;
        }
      });
    },
    //打开添加管理员页面/打开修改管理员页面/打开添加角色页面
    open() {
      this.bool = true;
      (this.form.password = ""),
        (this.form.role_id = ""),
        (this.form.status = ""),
        (this.form.username = "");
      this.form.jiaose11 = "";
      this.form.jiaose22 = "";
    },
    //确认添加/修改管理员或角色
    add(ok) {
      console.log(ok);
      //确认添加管理员或角色
      if (ok == "管理") {
        this.$axios.post(
          `http://ceshi5.dishait.cn/admin/manager${this.txt}`,
          {
            avatar: "",
            password: this.form.password,
            role_id: this.form.role_id,
            status: this.form.status,
            username: this.form.username,
          },
          {
            headers: {
              token: this.$store.state.token,
            },
          }
        );
        (this.form.password = ""),
          (this.form.role_id = ""),
          (this.form.status = ""),
          (this.form.username = ""),
          (this.txt = "");
      }
      //修改管理员或角色
      if (ok == "角色") {
        this.$axios.post(
          `http://ceshi5.dishait.cn/admin/role${this.txt}`,
          {
            desc: this.form.jiaose22,
            name: this.form.jiaose11,
            status: this.form.status,
          },
          {
            headers: {
              token: this.$store.state.token,
            },
          }
        );
        this.form.jiaose11 = "";
        this.form.status = "";
        this.form.jiaose22 = "";
      }
    },
    //关闭添加管理员页面/关闭修改管理员/关闭添加角色
    qaa() {
      this.bool = false;
      this.getdata(this.num1, this.num2);
      this.getjiaose(this.num1, this.num2);
    },

    //获取角色列表数据
    getjiaose(a, b) {
      this.$axios({
        method: "get",
        url: `http://ceshi5.dishait.cn/admin/role/${a}?limit=${b}`,
        headers: { token: this.$store.state.token },
      }).then((res) => {
        if (res.data.msg == "ok") {
          this.jiaose = res.data.data.list;
          //   this.arr = res.data.data.role;
          this.num1 = a;
          this.num2 = b;
        }
      });
    },
    handleSize(val) {
      //分页器
      if (this.tab == "manager") {
        this.getdata(this.num1, val);
      }
      if (this.tab == "role") {
        this.getjiaose(this.num1, val);
      }
    },
    handleCurrent(val) {
      //分页器
      if (this.tab == "manager") {
        this.getdata(val, this.num2);
      }
      if (this.tab == "role") {
        this.getjiaose(val, this.num2);
      }
    },

    //获取权限列表
    getquanxian() {
      this.$axios({
        method: "get",
        url: `http://ceshi5.dishait.cn/admin/rule/1?limit=10`,
        headers: { token: this.$store.state.token },
      }).then((res) => {
        if (res.data.msg == "ok") {
          //   console.log(res.data.data);
          this.list = res.data.data.list;
          console.log(this.list);
        }
      });
    },
  },
  mounted() {
    this.getdata(this.num1, this.num2);
    this.getjiaose(this.num1, this.num2);
    this.getquanxian();
  },
};
</script>
<style>
.blockaaa .el-tree-node__content {
  display: block;
  width: 100%;
}
.blockaaa .el-tree-node__children {
  width: 100%;
}
.boockaaa .el-tree-node {
  width: 100%;
}
.Administrator {
  padding-bottom: 40px;
}
.qwe2,
.qwe3 {
  width: 240px;
}
.qwe666 {
  margin-top: 30px;
  display: flex;
  justify-content: flex-end;
}
.no {
  width: 70px;
  height: 40px;
  background: #fff;
  border: 1px solid #dcdfe6;
  border-color: #dcdfe6;
  color: #606266;
}
.ok {
  width: 70px;
  height: 40px;
  margin-left: 20px;
  color: #fff;
  background-color: teal;
  border: none;
}
.qwe1 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.mainqwe {
  width: 70%;
  position: relative;
  top: 90px;
  margin: 0 auto 50px;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
  padding: 20px;
}

.zhezhao {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(1, 1, 1, 0.25);
  cursor: pointer;
  z-index: 100;
}
.quanbu {
  display: flex;
  justify-content: space-between;
}
.quanbu input {
  height: 28px;
  line-height: 28px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 150px;
  outline: none;
  padding: 0 15px;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  font-size: 12px;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  margin-right: 15px;
}
.Administrator .cell {
  text-align: center;
}
.block1111 {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 200px;
  background: #fff;
  z-index: 100;
  border: 1px solid #ccc;
}
</style>
